<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minecraft 管理员界面 - 管理MOD</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2a6c, #2c3e50);
      color: #ecf0f1;
      min-height: 100vh;
      overflow-x: hidden;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* 顶部导航栏样式 */
    header {
      background-color: rgba(0, 0, 0, 0.7);
      border-bottom: 2px solid #3498db;
      padding: 15px 0;
      backdrop-filter: blur(5px);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .logo-container {
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    .logo {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #3498db, #2ecc71);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
    }

    .logo i {
      font-size: 24px;
    }

    .server-info {
      flex: 1;
    }

    .server-stats {
      display: flex;
      gap: 20px;
      margin-top: 5px;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      color: #95a5a6;
    }

    /* 主内容区域样式 */
    .dashboard {
      display: grid;
      grid-template-columns: 250px 1fr;
      gap: 20px;
      margin-top: 20px;
    }

    /* 侧边栏样式 */
    .sidebar {
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 10px;
      padding: 20px;
      height: fit-content;
    }

    .admin-menu {
      list-style: none;
    }

    .menu-item {
      padding: 12px 15px;
      margin-bottom: 8px;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .menu-item:hover {
      background-color: rgba(52, 152, 219, 0.2);
    }

    .menu-item.active {
      background-color: #3498db;
      color: white;
    }

    /* 主面板样式 */
    .main-panel {
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 10px;
      padding: 25px;
      min-height: 80vh;
    }

    .panel-header {
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #3498db;
    }

    /* 模块样式 */
    .module {
      background-color: rgba(30, 30, 40, 0.8);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
      border-left: 4px solid #3498db;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .module-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .module-title {
      font-size: 20px;
      font-weight: 600;
    }

    .module-actions {
      display: flex;
      gap: 10px;
    }

    .btn {
      padding: 8px 15px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .btn-primary {
      background-color: #3498db;
      color: white;
    }

    .btn-success {
      background-color: #2ecc71;
      color: white;
    }

    .btn-danger {
      background-color: #e74c3c;
      color: white;
    }

    .btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }

    .module-content {
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 6px;
      padding: 15px;
      margin-top: 15px;
      min-height: 150px;
    }

    /* 注释样式 */
    .comment {
      background-color: rgba(26, 188, 156, 0.1);
      border-left: 3px solid #1abc9c;
      padding: 15px;
      margin: 15px 0;
      border-radius: 0 5px 5px 0;
      font-size: 14px;
    }

    .comment-title {
      color: #1abc9c;
      font-weight: bold;
      margin-bottom: 5px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .dashboard {
        grid-template-columns: 1fr;
      }

      .sidebar {
        display: none;
      }
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .card {
      background-color: rgba(40, 40, 50, 0.8);
      border-radius: 8px;
      padding: 15px;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .card-icon {
      width: 40px;
      height: 40px;
      background-color: #3498db;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    footer {
      text-align: center;
      padding: 20px;
      margin-top: 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: #95a5a6;
      font-size: 14px;
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      overflow-x: auto;
      padding-bottom: 10px;
    }

    .tab {
      padding: 10px 20px;
      background: rgba(52, 152, 219, 0.2);
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .tab.active {
      background: #3498db;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    th {
      background-color: rgba(52, 152, 219, 0.3);
    }

    tr:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }

    .status-badge {
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
    }

    .status-published {
      background-color: rgba(46, 204, 113, 0.2);
      color: #2ecc71;
    }

    .status-pending {
      background-color: rgba(241, 196, 15, 0.2);
      color: #f1c40f;
    }

    .status-rejected {
      background-color: rgba(231, 76, 60, 0.2);
      color: #e74c3c;
    }

    .pagination {
      display: flex;
      justify-content: center;
      gap: 5px;
      margin-top: 20px;
    }

    .page-btn {
      padding: 8px 15px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
    }

    .page-btn.active {
      background: #3498db;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header>
  <div class="container">
    <div class="logo-container">
      <div class="logo">
        <i class="fas fa-cubes"></i>
      </div>
      <div class="server-info">
        <h1>Minecraft 管理MOD</h1>
        <div class="server-stats">
          <div class="stat-item">
            <i class="fas fa-users"></i>
            <span>在线玩家: 24/50</span>
          </div>
          <div class="stat-item">
            <i class="fas fa-signal"></i>
            <span>状态: 运行中</span>
          </div>
          <div class="stat-item">
            <i class="fas fa-microchip"></i>
            <span>CPU: 42%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container">
  <div class="dashboard">
    <!-- 侧边栏导航 -->
    <div class="sidebar">
      <ul class="admin-menu">
        <li class="menu-item active">
          <i class="fas fa-home"></i>
          <span>控制面板</span>
        </li>
        <li class="menu-item">
          <i class="fas fa-download"></i>
          <span>下载管理</span>
        </li>
        <li class="menu-item">
          <i class="fas fa-file-alt"></i>
          <span>详细管理</span>
        </li>
        <li class="menu-item">
          <i class="fas fa-edit"></i>
          <span>增删改管理</span>
        </li>
        <li class="menu-item">
          <i class="fas fa-comments"></i>
          <span>评论管理</span>
        </li>
        <li class="menu-item">
          <i class="fas fa-check-circle"></i>
          <span>审核管理</span>
        </li>
      </ul>
    </div>

    <!-- 主内容区域 -->
    <div class="main-panel">
      <div class="panel-header">
        <h2 class="section-title">MOD管理控制台</h2>
        <div class="search-box">
          <input type="text" placeholder="搜索MOD资源..." style="padding: 8px; border-radius: 4px; border: none; background: rgba(255,255,255,0.1); color: white;">
        </div>
      </div>

      <!-- 模块标签导航 -->
      <div class="tabs">
        <div class="tab active">下载管理</div>
        <div class="tab">详细管理</div>
        <div class="tab">增删改管理</div>
        <div class="tab">评论管理</div>
        <div class="tab">审核管理</div>
      </div>

      <!-- 下载管理模块 -->
      <div class="tab-content active">
        <div class="module">
          <div class="module-header">
            <h3 class="module-title">下载管理</h3>
            <div class="module-actions">
              <button class="btn btn-primary">
                <i class="fas fa-plus"></i> 添加MOD
              </button>
              <button class="btn">
                <i class="fas fa-filter"></i> 筛选
              </button>
              <button class="btn">
                <i class="fas fa-download"></i> 导出
              </button>
            </div>
          </div>

          <div class="comment">
            <div class="comment-title">模块功能说明：</div>
            <p>此模块用于管理服务器上所有可供下载的MOD资源。管理员可以：</p>
            <ul>
              <li>查看所有可下载MOD列表及下载统计</li>
              <li>添加新的MOD到下载区</li>
              <li>设置MOD的可见性和访问权限</li>
              <li>监控MOD下载次数和热度排行</li>
              <li>管理MOD的不同版本和更新历史</li>
              <li>设置MOD的兼容性（Minecraft版本）</li>
              <li>导出下载统计数据</li>
            </ul>
          </div>

          <div class="module-content">
            <div class="table-container">
              <table>
                <thead>
                <tr>
                  <th>MOD名称</th>
                  <th>版本</th>
                  <th>支持MC版本</th>
                  <th>下载次数</th>
                  <th>最后更新</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>工业时代模组</td>
                  <td>2.5.1</td>
                  <td>1.18.2</td>
                  <td>1,245</td>
                  <td>2023-07-10</td>
                  <td><span class="status-badge status-published">已发布</span></td>
                  <td>
                    <button class="btn btn-primary" style="padding: 5px 10px; font-size: 12px;">下载</button>
                  </td>
                </tr>
                <tr>
                  <td>魔法世界模组</td>
                  <td>1.7.3</td>
                  <td>1.19.4</td>
                  <td>892</td>
                  <td>2023-07-05</td>
                  <td><span class="status-badge status-published">已发布</span></td>
                  <td>
                    <button class="btn btn-primary" style="padding: 5px 10px; font-size: 12px;">下载</button>
                  </td>
                </tr>
                <tr>
                  <td>农业扩展模组</td>
                  <td>3.0.2</td>
                  <td>1.19.2</td>
                  <td>2,103</td>
                  <td>2023-07-08</td>
                  <td><span class="status-badge status-published">已发布</span></td>
                  <td>
                    <button class="btn btn-primary" style="padding: 5px 10px; font-size: 12px;">下载</button>
                  </td>
                </tr>
                <tr>
                  <td>自动化工厂模组</td>
                  <td>1.4.0</td>
                  <td>1.18.2</td>
                  <td>567</td>
                  <td>2023-06-28</td>
                  <td><span class="status-badge status-pending">待更新</span></td>
                  <td>
                    <button class="btn btn-primary" style="padding: 5px 10px; font-size: 12px; opacity: 0.5;">下载</button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>

            <div class="pagination">
              <button class="page-btn active">1</button>
              <button class="page-btn">2</button>
              <button class="page-btn">3</button>
              <button class="page-btn">下一页</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细管理模块 -->
      <div class="tab-content">
        <div class="module">
          <div class="module-header">
            <h3 class="module-title">详细管理</h3>
            <div class="module-actions">
              <button class="btn">
                <i class="fas fa-sync-alt"></i> 刷新
              </button>
              <button class="btn btn-success">
                <i class="fas fa-save"></i> 保存
              </button>
            </div>
          </div>

          <div class="comment">
            <div class="comment-title">模块功能说明：</div>
            <p>此模块提供MOD资源的详细信息管理功能，管理员可以：</p>
            <ul>
              <li>查看和编辑MOD的详细描述和元数据</li>
              <li>管理MOD的不同版本和更新历史</li>
              <li>设置MOD分类和标签</li>
              <li>查看MOD的技术要求（依赖MOD、兼容版本等）</li>
              <li>添加MOD截图和演示视频</li>
              <li>管理MOD的配置文件和文档</li>
              <li>生成MOD详情页的分享链接</li>
            </ul>
          </div>

          <div class="module-content">
            <div class="grid">
              <div style="grid-column: span 2;">
                <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 5px; font-weight: bold;">MOD名称</label>
                  <input type="text" value="工业时代模组" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>

                <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 5px; font-weight: bold;">MOD描述</label>
                  <textarea style="width: 100%; height: 120px; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">添加了先进的机械和自动化系统，包括发电机、电线、采矿机和自动化农场。完全改变了Minecraft的技术玩法。</textarea>
                </div>
              </div>

              <div>
                <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 5px; font-weight: bold;">版本号</label>
                  <input type="text" value="2.5.1" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>

                <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 5px; font-weight: bold;">支持MC版本</label>
                  <select style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                    <option>1.18.2</option>
                    <option>1.19.2</option>
                    <option>1.19.4</option>
                  </select>
                </div>
              </div>

              <div>
                <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 5px; font-weight: bold;">作者</label>
                  <input type="text" value="TechTeam" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>

                <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 5px; font-weight: bold;">依赖MOD</label>
                  <input type="text" value="Forge, JEI" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 增删改管理模块 -->
      <div class="tab-content">
        <div class="module">
          <div class="module-header">
            <h3 class="module-title">增删改管理</h3>
            <div class="module-actions">
              <button class="btn btn-success">
                <i class="fas fa-plus"></i> 添加
              </button>
              <button class="btn btn-primary">
                <i class="fas fa-edit"></i> 编辑
              </button>
              <button class="btn btn-danger">
                <i class="fas fa-trash"></i> 删除
              </button>
              <button class="btn">
                <i class="fas fa-copy"></i> 复制
              </button>
            </div>
          </div>

          <div class="comment">
            <div class="comment-title">模块功能说明：</div>
            <p>此模块提供对MOD资源的增删改(CRUD)操作功能，管理员可以：</p>
            <ul>
              <li>添加新的MOD到服务器</li>
              <li>编辑现有MOD的各项属性</li>
              <li>删除不再需要的MOD</li>
              <li>批量操作多个MOD</li>
              <li>管理MOD的文件上传和更新</li>
              <li>设置MOD的状态（上线、下线、维护）</li>
              <li>复制现有MOD创建新模板</li>
              <li>管理MOD的版本历史记录</li>
            </ul>
          </div>

          <div class="module-content">
            <div class="grid">
              <div style="grid-column: span 1;">
                <h4 style="margin-bottom: 15px;">选择MOD</h4>
                <div style="background: rgba(255,255,255,0.1); border-radius: 6px; padding: 15px; height: 300px; overflow-y: auto;">
                  <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;">
                    <i class="fas fa-cube"></i> 工业时代模组
                  </div>
                  <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;">
                    <i class="fas fa-cube"></i> 魔法世界模组
                  </div>
                  <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;">
                    <i class="fas fa-cube"></i> 农业扩展模组
                  </div>
                  <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;">
                    <i class="fas fa-cube"></i> 自动化工厂模组
                  </div>
                  <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;">
                    <i class="fas fa-cube"></i> 怪物增强模组
                  </div>
                  <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer;">
                    <i class="fas fa-cube"></i> 家具装饰模组
                  </div>
                </div>
              </div>

              <div style="grid-column: span 2;">
                <h4 style="margin-bottom: 15px;">MOD编辑</h4>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                  <div>
                    <label style="display: block; margin-bottom: 5px;">MOD名称</label>
                    <input type="text" value="工业时代模组" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                  </div>
                  <div>
                    <label style="display: block; margin-bottom: 5px;">版本号</label>
                    <input type="text" value="2.5.1" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                  </div>
                  <div>
                    <label style="display: block; margin-bottom: 5px;">支持MC版本</label>
                    <select style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                      <option>1.18.2</option>
                      <option>1.19.2</option>
                      <option>1.19.4</option>
                    </select>
                  </div>
                  <div>
                    <label style="display: block; margin-bottom: 5px;">状态</label>
                    <select style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                      <option>已发布</option>
                      <option>待审核</option>
                      <option>已下架</option>
                      <option>维护中</option>
                    </select>
                  </div>
                  <div style="grid-column: span 2;">
                    <label style="display: block; margin-bottom: 5px;">MOD文件</label>
                    <div style="display: flex; gap: 10px;">
                      <input type="text" value="industrial_mod_v2.5.1.jar" style="flex: 1; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                      <button class="btn" style="padding: 10px 15px;">浏览...</button>
                      <button class="btn btn-primary" style="padding: 10px 15px;">上传</button>
                    </div>
                  </div>
                  <div style="grid-column: span 2; text-align: right; margin-top: 10px;">
                    <button class="btn btn-success">保存修改</button>
                    <button class="btn btn-danger">删除MOD</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评论管理模块 -->
      <div class="tab-content">
        <div class="module">
          <div class="module-header">
            <h3 class="module-title">评论管理</h3>
            <div class="module-actions">
              <button class="btn btn-danger">
                <i class="fas fa-ban"></i> 屏蔽
              </button>
              <button class="btn">
                <i class="fas fa-check"></i> 通过
              </button>
              <button class="btn">
                <i class="fas fa-reply"></i> 回复
              </button>
            </div>
          </div>

          <div class="comment">
            <div class="comment-title">模块功能说明：</div>
            <p>此模块管理用户对MOD的评论，包括评论的增删改功能：</p>
            <ul>
              <li>查看所有MOD的用户评论</li>
              <li>回复用户评论</li>
              <li>编辑或删除不当评论</li>
              <li>将优质评论置顶</li>
              <li>管理评论的可见性</li>
              <li>设置评论审核规则</li>
              <li>禁言发布不当评论的用户</li>
              <li>统计评论热度</li>
            </ul>
          </div>

          <div class="module-content">
            <div style="display: flex; gap: 15px; margin-bottom: 20px;">
              <div style="flex: 1;">
                <h4>评论列表</h4>
                <div style="background: rgba(255,255,255,0.1); border-radius: 6px; padding: 15px; height: 400px; overflow-y: auto;">
                  <div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                      <strong>SteveMiner</strong>
                      <small>2023-07-10 14:30</small>
                    </div>
                    <p style="margin-bottom: 10px;">这个模组太棒了！完全改变了游戏体验！</p>
                    <div style="display: flex; gap: 5px;">
                      <button class="btn" style="padding: 3px 8px; font-size: 12px;">回复</button>
                      <button class="btn" style="padding: 3px 8px; font-size: 12px;">置顶</button>
                      <button class="btn btn-danger" style="padding: 3px 8px; font-size: 12px;">屏蔽</button>
                    </div>
                  </div>

                  <div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                      <strong>CreeperKing</strong>
                      <small>2023-07-09 18:45</small>
                    </div>
                    <p style="margin-bottom: 10px;">和XX模组有冲突，希望作者能修复</p>
                    <div style="display: flex; gap: 5px;">
                      <button class="btn" style="padding: 3px 8px; font-size: 12px;">回复</button>
                      <button class="btn" style="padding: 3px 8px; font-size: 12px;">置顶</button>
                      <button class="btn btn-danger" style="padding: 3px 8px; font-size: 12px;">屏蔽</button>
                    </div>
                  </div>

                  <div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,0,0,0.1);">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                      <strong>TrollMaster</strong>
                      <small>2023-07-09 22:15</small>
                    </div>
                    <p style="margin-bottom: 10px;">垃圾模组，根本不能用！</p>
                    <div style="display: flex; gap: 5px;">
                      <button class="btn" style="padding: 3px 8px; font-size: 12px;">回复</button>
                      <button class="btn" style="padding: 3px 8px; font-size: 12px;">置顶</button>
                      <button class="btn btn-danger" style="padding: 3px 8px; font-size: 12px;">屏蔽</button>
                    </div>
                  </div>
                </div>
              </div>

              <div style="flex: 1;">
                <h4>评论详情</h4>
                <div style="background: rgba(255,255,255,0.1); border-radius: 6px; padding: 15px; height: 400px;">
                  <div style="margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                      <strong>SteveMiner</strong>
                      <small>2023-07-10 14:30</small>
                    </div>
                    <p style="margin-bottom: 10px; padding: 10px; background: rgba(26, 188, 156, 0.1); border-radius: 4px;">
                      这个模组太棒了！完全改变了游戏体验！
                    </p>
                  </div>

                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px;">管理员回复</label>
                    <textarea style="width: 100%; height: 100px; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;"></textarea>
                  </div>

                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px;">操作</label>
                    <div style="display: flex; gap: 10px;">
                      <button class="btn btn-success" style="flex: 1;">通过审核</button>
                      <button class="btn btn-danger" style="flex: 1;">屏蔽评论</button>
                      <button class="btn" style="flex: 1;">置顶评论</button>
                    </div>
                  </div>

                  <div>
                    <label style="display: block; margin-bottom: 5px;">用户状态</label>
                    <div style="display: flex; gap: 10px;">
                      <select style="flex: 1; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                        <option>正常</option>
                        <option>警告</option>
                        <option>禁言1天</option>
                        <option>禁言7天</option>
                        <option>永久禁言</option>
                      </select>
                      <button class="btn btn-primary" style="flex: 1;">应用</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核管理模块 -->
      <div class="tab-content">
        <div class="module">
          <div class="module-header">
            <h3 class="module-title">审核管理</h3>
            <div class="module-actions">
              <button class="btn btn-success">
                <i class="fas fa-check"></i> 通过
              </button>
              <button class="btn btn-danger">
                <i class="fas fa-times"></i> 拒绝
              </button>
              <button class="btn">
                <i class="fas fa-clock"></i> 延期
              </button>
            </div>
          </div>

          <div class="comment">
            <div class="comment-title">模块功能说明：</div>
            <p>此模块处理MOD资源的审核流程，管理员可以：</p>
            <ul>
              <li>查看待审核的MOD列表</li>
              <li>审核新提交的MOD内容</li>
              <li>检查MOD的合规性和安全性</li>
              <li>批准或拒绝MOD发布</li>
              <li>添加审核备注和反馈</li>
              <li>设置自动审核规则</li>
              <li>查看审核历史记录</li>
              <li>管理审核队列优先级</li>
            </ul>
          </div>

          <div class="module-content">
            <div class="table-container">
              <table>
                <thead>
                <tr>
                  <th>MOD名称</th>
                  <th>提交者</th>
                  <th>提交时间</th>
                  <th>版本</th>
                  <th>支持MC版本</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>未来科技模组</td>
                  <td>TechGuru</td>
                  <td>2023-07-11</td>
                  <td>1.0.0</td>
                  <td>1.19.2</td>
                  <td><span class="status-badge status-pending">待审核</span></td>
                  <td>
                    <button class="btn btn-success" style="padding: 5px 10px; font-size: 12px;">通过</button>
                    <button class="btn btn-danger" style="padding: 5px 10px; font-size: 12px;">拒绝</button>
                  </td>
                </tr>
                <tr>
                  <td>海底世界模组</td>
                  <td>OceanExplorer</td>
                  <td>2023-07-10</td>
                  <td>2.1.3</td>
                  <td>1.18.2</td>
                  <td><span class="status-badge status-pending">待审核</span></td>
                  <td>
                    <button class="btn btn-success" style="padding: 5px 10px; font-size: 12px;">通过</button>
                    <button class="btn btn-danger" style="padding: 5px 10px; font-size: 12px;">拒绝</button>
                  </td>
                </tr>
                <tr>
                  <td>中世纪武器模组</td>
                  <td>KnightWarrior</td>
                  <td>2023-07-09</td>
                  <td>1.5.0</td>
                  <td>1.19.4</td>
                  <td><span class="status-badge status-pending">审核中</span></td>
                  <td>
                    <button class="btn btn-success" style="padding: 5px 10px; font-size: 12px;">通过</button>
                    <button class="btn btn-danger" style="padding: 5px 10px; font-size: 12px;">拒绝</button>
                  </td>
                </tr>
                <tr>
                  <td>更多生物群系模组</td>
                  <td>NatureLover</td>
                  <td>2023-07-08</td>
                  <td>3.2.1</td>
                  <td>1.19.2</td>
                  <td><span class="status-badge status-rejected">已拒绝</span></td>
                  <td>
                    <button class="btn">查看原因</button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>

            <div style="margin-top: 20px; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 15px;">
              <h4 style="margin-bottom: 15px;">审核详情</h4>
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                <div>
                  <label style="display: block; margin-bottom: 5px;">MOD名称</label>
                  <input type="text" value="未来科技模组" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>
                <div>
                  <label style="display: block; margin-bottom: 5px;">提交者</label>
                  <input type="text" value="TechGuru" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>
                <div>
                  <label style="display: block; margin-bottom: 5px;">版本</label>
                  <input type="text" value="1.0.0" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>
                <div>
                  <label style="display: block; margin-bottom: 5px;">支持MC版本</label>
                  <input type="text" value="1.19.2" style="width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">
                </div>
                <div style="grid-column: span 2;">
                  <label style="display: block; margin-bottom: 5px;">MOD描述</label>
                  <textarea style="width: 100%; height: 80px; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;">添加未来科技元素，包括激光武器、悬浮车辆和AI机器人。</textarea>
                </div>
                <div style="grid-column: span 2;">
                  <label style="display: block; margin-bottom: 5px;">审核意见</label>
                  <textarea style="width: 100%; height: 100px; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 4px;"></textarea>
                </div>
                <div style="grid-column: span 2; display: flex; gap: 10px; justify-content: flex-end;">
                  <button class="btn btn-success">通过审核</button>
                  <button class="btn btn-danger">拒绝审核</button>
                  <button class="btn">请求更多信息</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <p>Minecraft 管理MOD系统 &copy; 2023 | 当前版本: v2.0.1 | 服务器状态: 运行中</p>
    <p>注意：这是一个静态界面模板，所有功能按钮仅为视觉展示</p>
  </div>
</footer>

<script>
  // 简单的标签切换功能
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
      // 移除所有活动状态
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

      // 添加当前活动状态
      tab.classList.add('active');

      // 显示对应的内容
      const index = Array.from(document.querySelectorAll('.tab')).indexOf(tab);
      document.querySelectorAll('.tab-content')[index].classList.add('active');
    });
  });

  // 侧边菜单切换
  document.querySelectorAll('.menu-item').forEach(item => {
    item.addEventListener('click', function() {
      document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
      this.classList.add('active');
    });
  });
</script>
</body>
</html>